<template>
  <div class="page-content">
    <div id="print" ref="print">
      <div style="font-size: 25px;font-weight: bold;position: absolute;right: 0;padding-top: 5px">
        NO：
        <span style="color: #F56C6C">
          {{ shipmentInfo.shipmentNo }}
        </span>
      </div>
      <div style="text-align: center;font-size: 32px;font-weight: bold;padding-top: 5px">{{ sysConfigInfo.enterpriseFullName }}送货单</div>
      <div style="text-align: center;padding-top: 2px;">地址：{{ sysConfigInfo.address }}</div>
      <div style="text-align: center;padding-top: 2px">
        <span>电话：{{ sysConfigInfo.landlineNum }}</span>
        <span style="padding-left: 15px">传真：{{ sysConfigInfo.faxNum }}</span>
      </div>
      <div style="text-align: center;padding-top: 2px">
        手机：{{ sysConfigInfo.phoneNum }}
      </div>
      <div style="padding-top:10px;padding-bottom:10px;font-size: 18px">
        <span>收货单位: {{ shipmentInfo.customerName }}</span>
        <span style="float: right">日期：{{ nowDate }}</span>
      </div>
      <table v-loading="tableLoading" style="border-collapse: collapse;width: 100%">
        <thead style="text-align: center;font-size: 14px;height: 50px;line-height: 50px">
          <tr>
            <th width="80">序号</th>
            <th width="140">订单编号</th>
            <th width="300">产品名称</th>
            <th width="100">单位</th>
            <th width="100">数量</th>
            <th width="100">单价</th>
            <th width="100">金额</th>
            <th width="120">备注</th>
          </tr>
        </thead>
        <tbody style="font-size: 13px;color:#333333;text-align: center;">
          <tr v-for="(item,index) in shipmentInfo.orderList" :key="index" style="height: 50px">
            <td>{{ index + 1 }}</td>
            <td>{{ item.orderNo }}</td>
            <td>
              <div>{{ item.productName }}</div>
            </td>
            <td>{{ item.unit }}</td>
            <td>
              {{ item.quantity }}
            </td>
            <td>{{ item.unitPrice }}</td>
            <td>{{ item.amount }}</td>
            <td>{{ item.remark }}</td>
          </tr>
          <tr style="height: 50px;font-size: 20px;font-weight: bold">
            <td colspan="3">
              <div style="font-size: 20px;font-weight: bold">合计（小写）：<money-format v-model="shipmentInfo.amount" /></div>
            </td>
            <td colspan="5">
              <div>
                合计（大写）：{{ convertMoney(shipmentInfo.amount) }}
              </div>
            </td>
          </tr>
          <tr style="height: 50px">
            <td colspan="3">注意：1）如对货物任何投诉，须于收货后七天内提出，否则货物已作收妥无误</td>
            <td colspan="5">2）货物一经裁剪，不再接受任何投诉</td>
          </tr>
        </tbody>
      </table>
      <div style="padding-top: 10px;">
        <div style="font-size: 20px;padding-left: 20px">收货人</div>
      </div>
      <div style="padding-top: 2px;display: flex;">
        <div style="flex: 1">（货款未付）:</div>
        <div style="font-size: 20px;flex: 1">送货人：</div>
        <div style="font-size: 20px;flex: 1;">开单人：</div>
      </div>
    </div>
  </div>
</template>

<script>
import Moment from 'moment'
import print from 'print-js'
import { shipment_detail } from '@/api/sale/shipment'
import { selectConfig } from '@/api/system/config'
import { convertMoney } from '@/utils/monyFormat'

export default {
  name: 'ShipmentPrintModule',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableLoading: false,
      sysConfigInfo: {},
      shipmentInfo: {
        customerName: '',
        orderList: ''
      },
      nowDate: Moment(new Date()).format('YYYY年MM月DD日')
    }
  },
  mounted() {
    this.init(this.$route.query)
    this.getSysConfigInfo()
  },
  methods: {
    convertMoney,
    init(query) {
      this.tableLoading = true
      shipment_detail(query.id).then(resp => {
        if (resp.success) {
          this.shipmentInfo = resp.data
          for (let i = 0; i < this.shipmentInfo.orderList.length; i++) {
            var element = this.shipmentInfo.orderList[i]
            element.orderNo = element.orderInfo.orderNo
            element.productName = element.orderInfo.productName
            element.unitPrice = element.orderInfo.unitPrice
            element.unit = element.orderInfo.unit
          }
          if (this.shipmentInfo.orderList.length < 10) {
            for (let i = 0; i < 7; i++) {
              var listElement = this.shipmentInfo.orderList[i]
              if (!listElement) {
                this.shipmentInfo.orderList[i] = {}
              }
            }
          }
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    getSysConfigInfo() {
      selectConfig().then(resp => {
        this.sysConfigInfo = resp.data
      })
    },
    doPrint() {
      print({
        printable: 'print', // 'printFrom', // 标签元素id
        type: 'html',
        documentTitle: '文档标题',
        header: `<div style="font-size: 25px;font-weight: bold;position: absolute;right: 0;padding-top: 30px">
          <div style="color: #F56C6C">
           NO:${this.shipmentInfo.shipmentNo}
          </div>
        </div>
        <div style="text-align: center;font-size: 32px;font-weight: bold;padding-top: 20px">${this.sysConfigInfo.enterpriseFullName}送货单</div>
        <div style="text-align: center;padding-top: 10px;">地址：${this.sysConfigInfo.address}</div>
        <div style="text-align: center;padding-top: 2px">
          <span>电话：${this.sysConfigInfo.landlineNum}</span>
          <span style="padding-left: 15px">传真：${this.sysConfigInfo.faxNum}</span>
        </div>
        <div style="text-align: center;padding-top: 2px">
          手机：${this.sysConfigInfo.phoneNum}
        </div>
        <div style="padding-top:2px;padding-bottom:10px;font-size: 18px">
          <span>收货单位: ${this.shipmentInfo.customerName}</span>
          <span style="float: right">日期：${this.nowDate}</span>
        </div>`,
        headerStyle: '{padding-bottom: 20px;color: #F56C6C}',
        targetStyles: ['*'],
        style: '@page {margin:0 10mm;width: 297mm};@media print{@page {size:landscape;width: 297mm}}}', // 可选-打印时去掉眉页眉尾
        ignoreElements: ['noPrint'], // ['no-print']
        maxWidth: 1200,
        properties: null,
        scanStyle: true
      })
    }
  }
}
</script>

<style scoped>
td, th {
  border: 1px solid #000; /* 设置单条线的边框样式 */
}
</style>
